﻿<template>
    <div class="about bg-[#F8F8F8] text-black min-h-[calc(100vh-60px)]" >
        <div class="m">
            <h1 class="font40 text-center mt-[160px]">{{ t('LearnMore') }}</h1>
            <p class="font18 text-center py-10">
                {{ t('Need') }}
            </p>
            <div class="py-[60px]">
                <div class="flex items-center rounded-md shadow-md h-auto md:h-[448px] overflow-hidden">
                    <div class="img w-[40%] h-full hidden md:block"></div>
                    <div class="flex-1 p-5 md:p-10">
                        <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                            <div class="flex flex-wrap justify-between">
                                <el-form-item :label="t('CompanyName')" prop="companyName" class="w-full md:w-[45%]">
                                    <el-input v-model="form.companyName" :placeholder="t('Enter')" maxlength="100" />
                                </el-form-item>
                                <el-form-item :label="t('ContactPerson')" prop="userName" class="w-full md:w-[45%]">
                                    <el-input v-model="form.userName" :placeholder="t('Enter')" maxlength="30" />
                                </el-form-item>
                                <el-form-item :label="t('Phone')" prop="phoneNo" class="w-full md:w-[45%]">
                                    <el-input v-model="form.phoneNo" :placeholder="t('Enter')" maxlength="15" />
                                </el-form-item>
                                <el-form-item :label="t('Email')" prop="email" class="w-full md:w-[45%]">
                                    <el-input v-model="form.email" :placeholder="t('Enter')" maxlength="30" />
                                </el-form-item>
                            </div>
                            <el-form-item :label="t('Message')" prop="message">
                                <el-input
                                    :rows="6"
                                    v-model="form.message"
                                    type="textarea"
                                    maxlength="500"
                                    :placeholder="t('Enter')"
                                    show-word-limit
                                />
                            </el-form-item>

                            <div>
                                <button type="button" class="red-btn" @click="submit">
                                    {{ t('Submit') }}
                                </button>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import api from '@/apis/base';
import type { FormInstance, FormRules } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';
import { successTips } from '@/utils/utils';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();

const form = reactive({
    companyName: '',
    userName: '',
    phoneNo: '',
    email: '',
    message: '',
});
const formRef = ref<FormInstance>();

const submit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (!valid) return;
        api.senduserfeedback(form).then((res: any) => {
            if (!res || res.code != 1) return;
            successTips(t('SubmitSuccess'));
            formRef.value?.resetFields();
        });
    });
};
const rules = {
    // companyName: [{ required: true, message: t('Enter'), trigger: 'blur' }],
    userName: [{ required: true, message: t('Information'), trigger: 'blur' }],
    phoneNo: [
        { required: true, message: t('Information'), trigger: 'blur' },
        { min: 6, max: 15, message: t('Length'), trigger: 'blur' },
    ],
    email: [
        { required: true, message: t('Information'), trigger: 'blur' },
        {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: t('EmailError'),
            trigger: 'blur',
        },
    ],
};

watch(
    () => locale.value,
    () => {
        formRef.value?.resetFields();
    }
);
</script>

<style scoped lang="scss">
.img {
    background: url('@/assets/imgs/about/bg.jpg') no-repeat center;
    background-size: cover;
}
:deep(.el-input__inner) {
    height: 44px;
}
</style>
